<template>
    <div class="layout">
        <Layout>
            <Layout :style="{ padding: '0 0px 0px' }">
                <div style="padding-top: 10px;padding-left:5px;padding-bottom: 20px;">
                    <Space wrap>
                        <Button @click="AddModal = true">添加</Button>
                        <!-- <button @click="add">添加</button> -->
                        <!-- <Button to="/view-ui-plus/component/base/icon" replace>No history</Button> -->
                    </Space>
                    <div v-for="items in addressBook">
                        <br>
                        <PageHeader>
                            <template #content> <!--通讯录中每个联系人的基本属性 -->
                                <DescriptionList :col="2">
                                    <Description term="姓名：">{{ items.name }}</Description>
                                    <Description term="个人邮箱：">{{ items.emailbox }}</Description>
                                    <Description term="电话号码：">{{ items.tele }}</Description>
                                    <Description term="家庭地址：">{{ items.address }}</Description>
                                    <Description term="生日：">{{ items.birthday }}</Description>
                                    <Description term="工作：">{{ items.job }}.</Description>
                                </DescriptionList>
                            </template>
                            <template #extra>
                                <Button type="primary" @click="emailSendModal = true">写邮件</Button>
                                <!--写邮件按钮绑定写信，点击后弹出modal对话框 -->
                            </template>
                        </PageHeader>
                    </div>
                </div>

                <!-- <Content :style="{ padding: '0px', minHeight: '20px', background: '#fff', }">
                    <p>收信</p>
                </Content> -->
                <!-- </Form> -->
                <Modal title="添加联系人" v-model="contactAddModal" :mask-closable="false" ok-text="提交" @on-ok="add">
                    <!--点击“添加”后弹出来的关于联系人的modal对话框 
                                                       点击“提交”后调用add函数，体现到界面上    -->
                    <Form :model="formAdd" label-position="right" :label-width="100">
                        <FormItem label="姓名">
                            <Input v-model="formAdd.name" placeholder="请输入姓名"></Input>
                        </FormItem>
                        <FormItem label="个人邮箱">
                            <Input v-model="formAdd.emailbox" placeholder="请输入邮箱"></Input>
                        </FormItem>
                        <FormItem label="电话号码">
                            <Input v-model="formAdd.tele"></Input>
                        </FormItem>
                        <FormItem label="家庭地址">
                            <Input v-model="formAdd.address"></Input>
                        </FormItem>
                        <FormItem label="生日">
                            <Input v-model="formAdd.birthday"></Input>
                        </FormItem>
                        <FormItem label="工作">
                            <Input v-model="formAdd.job"></Input>
                        </FormItem>
                        <FormItem label="QQ">
                            <Input v-model="formAdd.QQ"></Input>
                        </FormItem>
                    </Form>
                </Modal>

                <!-- 给某个联系人写邮件弹出来的modal对话框 -->
                <Modal title="写信" v-model="emailSendModal" :mask-closable="false" ok-text="发送" @on-ok="sendEmail"
                    draggable="true"> <!-- 设置此modal对话框为课拖拽的 -->

                    <!-- realEmailModal是真正弹出来的可显示modal对话框，以下内容实现与发信界面相同的功能 -->
                    <Form ref="realEmailModal" :model="realEmailModal" :rules="ruleValidate" :label-width="80">
                        <FormItem label="收件人" prop="name">
                            <Input v-model="realEmailModal.name" placeholder="请输入收件人名字"></Input>
                        </FormItem>
                        <div v-if="open === true"><!--  判断-->
                            <FormItem label="抄送" prop="othername">
                                <Input v-model="realEmailModal.othername"></Input>
                            </FormItem>
                        </div>
                        <div v-if="open === false">
                            <FormItem label="" prop="link">
                                <a @click="open = true">添加抄送</a>
                            </FormItem>
                        </div>
                        <div v-else>
                            <FormItem label="" prop="link">
                                <a @click="open = false">删除抄送</a>
                            </FormItem>
                        </div>
                        <FormItem label="主题" prop="theme">
                            <Input v-model="realEmailModal.theme"></Input>
                        </FormItem>
                        <FormItem prop="file">
                            <div class="upload-form">
                                <!-- <label for="file-input">选择文件</label> -->
                                <input type="file" id="file-input" @change="handleFileChange">
                            </div>
                        </FormItem>
                        <FormItem label="正文" prop="text">
                            <Input v-model="realEmailModal.text" type="textarea" :rows="10" />
                        </FormItem>
                        <FormItem>
                            <div style="float: left;">
                                <p>发件人：</p>
                            </div>
                            <div style="float: left;">
                                <Poptip v-model="visible">
                                    <a>{{ name }}</a><a>{{ SenderName }}</a>
                                    <template #title>
                                        <div><i>{{ title1 }}</i></div>
                                    </template>
                                    <template #content>
                                        <div style="float: left;">
                                            <p>发送昵称：</p>
                                        </div>
                                        <div style="float: left;">
                                            <p>{{ name }}</p>
                                        </div>
                                        <div style="float: left;padding-left: 6px;">
                                            <a style="color: blue;" @click="modifyNameModal = true">修改</a>
                                        </div>
                                    </template>
                                </Poptip>
                            </div>
                        </FormItem>
                    </Form>
                </Modal>
                <Modal title="修改昵称" v-model="modifyNameModal" class-name="vertical-center-AddModal">
                    <Input v-model="name" placeholder="请输入昵称" style="width: 300px" />
                </Modal>
            </Layout>
        </Layout>
    </div>
</template>

<script>
//添加联系人后显示的modal对话框
export default {
    name: "Vueaddressbook",
    data() {
        return {
            AddModal: false,
            emailSendModal: false,
            modifyNameModal: false,
            formAdd: {  //添加联系人modal对话框里的属性
                name: '',
                emailbox: '',
                tele: '',
                address: '',
                birthday: '',
                job: '',
                QQ: '',
            },
            addressBook: [
                {
                    name: 'vdv',
                    emailbox: 'vdfv',
                    tele: 'vdv',
                    address: 'ver',
                    birthday: 'retg',
                    job: 'grtg',
                    QQ: 'efe',
                },
                {
                    name: 'efrg',
                    emailbox: 'ger',
                    tele: 'ge',
                    address: 'gre',
                    birthday: 'ge',
                    job: 'gtg',
                    QQ: 'gtege',
                },
                {
                    name: 'etge',
                    emailbox: 'gete',
                    tele: 'ege',
                    address: 'ger',
                    birthday: 'tgrgt',
                    job: 'grg',
                    QQ: 'grtg',
                }
            ],

            realEmailModal: {
                name: '',
                othername: '',
                theme: '',
                text: '',
                formData: new FormData(),
            },
            open: false,
            fileList: {},
            SenderName: "536257825752@qq.com",
            name: "萱",
            title1: "√536257825752@qq.com",

        }
    },
    methods: {
        handleFileChange(e) {
            this.selectedFile = e.target.files[0];
        },
        uploadProgress(evt) {
            if (evt.lengthComputable) {
                const percent = Math.round((evt.loaded / evt.total) * 100);
                this.progress = percent;
            }
        },
        sendEmail() {
            if (!this.selectedFile) {
                alert('请选择文件');
                return;
            }
            this.realEmailModal.formData.append('file', this.selectedFile);
            this.$store.dispatch('email/sendEmail', { "Sender": this.SenderName, "Receive": this.realEmailModal.name, "Content": this.realEmailModal.text })
                .then(res => {
                    console.log("后端返回")
                    console.log(res)
                    this.$message({
                        type: "success",
                        message: "发送成功"
                    })
                })
                .catch(error => {
                    this.$message({
                        type: "error",
                        message: "失败"
                    })
                })
        },
        add() {
            var item = {
                name: '',
                emailbox: '',
                tele: '',
                address: '',
                birthday: '',
                job: '',
                QQ: '',
            };
            item.name = this.formAdd.name;
            item.emailbox = this.formAdd.emailbox;
            item.tele = this.formAdd.tele;
            item.address = this.formAdd.address;
            item.birthday = this.formAdd.birthday;
            item.job = this.formAdd.job;
            this.addressBook.push(item)
        }
    }
}
</script>

<style scoped>
.col-border {
    border-right: 1px solid var(--el-border-color);
    margin-right: 20px;
}
</style>
